import { useState } from 'react';
import { Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { useSelector, useDispatch } from 'react-redux';

const getDevice = state => state.layoutHead.device;

export default function LayoutHead() {
    const device = useSelector(getDevice);
    const [visible, setVisible] = useState(false);

    const handleMenuClick = (e) => {
        console.log('e', e);
    }

    const handleVisibleChange = (e) => {
        console.log('e', e);
        setVisible(e)
    }

    return <>
        <Dropdown
            trigger={'click'}
            overlay={
                (<Menu onClick={handleMenuClick}>
                    <Menu.Item key="1">Clicking me will not close the menu.</Menu.Item>
                    <Menu.Item key="2">Clicking me will not close the menu also.</Menu.Item>
                    <Menu.Item key="3">Clicking me will close the menu.</Menu.Item>
                </Menu>)
            }
            onVisibleChange={handleVisibleChange}
            visible={visible}
        >
            <div>
            {device.name} <DownOutlined />
            </div>
        </Dropdown>
    </>
}